<template>
  <div class="course-root" @scroll="scrollEvent">
    <div class="navs">
      <div
        class="nav-item"
        v-for="courseNav in course_fields"
        :key="courseNav.id"
        @click="changeCourseNav(courseNav.id)"
      >
        {{ courseNav.name }}
      </div>
    </div>
    <div class="types">
      <div class="types-item">
        <h3
          @click="sortTypeEvent(2)"
          :class="{ 'sort-type-active': sortType === 2 }"
        >
          综合
        </h3>
        <h3
          @click="sortTypeEvent(1)"
          :class="{ 'sort-type-active': sortType === 1 }"
        >
          最新
        </h3>
        <h3
          @click="sortTypeEvent(3)"
          :class="{ 'sort-type-active': sortType === 3 }"
        >
          最热
        </h3>
      </div>
      <div class="types-type">
        <div class="types-show">
          <p @click="isLevelShow = !isLevelShow">
            {{ levelTitle }}<span>↓</span>
          </p>
          <div v-show="isLevelShow">
            <h3
              @click="levelTypeEvent()"
              :class="{ 'sort-type-active': levelType == '' }"
            >
              全部
            </h3>
            <h3
              @click="levelTypeEvent(1)"
              :class="{ 'sort-type-active': levelType == '1' }"
            >
              入门
            </h3>
            <h3
              @click="levelTypeEvent('2,3,4,5')"
              :class="{ 'sort-type-active': levelType == '2,3,4,5' }"
            >
              提升
            </h3>
          </div>
        </div>
      </div>
    </div>
    <div class="course">
      <div
        v-show="isloading"
        class="loading"
        style="
          height: 50px;
          text-align: center;
          line-height: 50px;
          color: gray;
          font-size: 14px;
        "
      >
        加载中...
      </div>
      <div v-show="!isloading">
        <course-item
          v-for="course in coursees"
          :key="course.id"
          :course="course"
        ></course-item>
      </div>
    </div>
  </div>
</template>

<script>
import CourseItem from "@/components/CourseItem";
export default {
  name: "CourseView",
  data() {
    return {
      course_fields: [],
      coursees: [],
      isLevelShow: false, // 是否显示入门、提升等条件
      sortType: 2, // 左侧的最新、最热排序
      levelType: "", // 右侧的入门、提升排序
      levelTitle: "全部", // 右侧标题
      isloading: true,
      page: 1,
      courseNavId: 0,
    };
  },
  async created() {
    // axios.get("", {params: {请求参数}}) params固定写法
    // axios.post("", {请求参数})
    const {
      data: { course_fields },
    } = await this.$request("/lqb/api/course-group-list", "GET", {
      params: {
        course_fields: 1,
      },
    });
    this.course_fields = course_fields;
    this.courseNavId = this.course_fields[0].id;
    this.getDatas();
  },
  methods: {
    async getDatas() {
      const params = {
        course_fields_ids: this.courseNavId,
        page: this.page,
        limit: 8,
        type: this.sortType,
      };
      if (this.levelType) {
        // 右侧没有选中全部，含有请求参数level
        params.level = this.levelType;
      }
      // ?course_fields_ids=8&type=2&limit=8&page=1
      const {
        data: { data },
      } = await this.$request("/lqb/api/course/video", "GET", {
        params,
      });
      this.isloading = false;
      if (!data.length) {
        alert("已经到达底部了");
        return;
      }
      console.log(this.page, data.length);
      this.coursees = this.page == 1 ? data : [...this.coursees, ...data];
    },
    sortTypeEvent(id) {
      this.sortType = id;
      this.isloading = true;
      this.getDatas();
      this.page = 1;
    },
    levelTypeEvent(type) {
      this.page = 1;
      if (!type) this.levelType = "";
      else this.levelType = type;
      this.isloading = true;
      this.getDatas();
      this.isLevelShow = false;
      if (!type) this.levelTitle = "全部";
      else if (type == "1") this.levelTitle = "入门";
      else if (type == "2,3,4,5") this.levelTitle = "提升";
    },
    scrollEvent(e) {
      if (e.target.scrollTop + e.target.clientHeight >= e.target.scrollHeight) {
        this.page++;
        this.getDatas();
      }
    },
    changeCourseNav(id) {
      this.courseNavId = id;
      this.page = 1;
      this.sortType = 2;
      this.levelType = "";
      this.levelTitle = "全部";
      this.getDatas();
    },
  },
  components: {
    CourseItem,
  },
};
</script>

<style scoped lang="scss">
.course-root {
  margin-top: 140px;
  overflow-y: scroll;
  height: calc(100vh - 140px - 60px);
}
.navs {
  z-index: 1000;
  background-color: #fff;
  width: 100vw;
  height: 60px;
  display: flex;
  align-items: center;
  overflow-x: scroll;
  position: fixed;
  top: 90px;
  left: 0;
  &::-webkit-scrollbar {
    display: none;
  }
  > div {
    flex-shrink: 0;
    padding: 0 10px;
  }
}
.types {
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  .types-item {
    display: flex;
    > h3 {
      margin: 0 5px;
      font-weight: normal;
      font-size: 14px;
    }
  }
  .types-show {
    position: relative;
    > p {
      font-size: 14px;
    }
    > div {
      position: absolute;
      top: 30px;
      left: -55px;
      width: 100px;
      background-color: #fff;
      height: 150px;
      > h3 {
        height: 50px;
        line-height: 50px;
        text-align: center;
        font-weight: normal;
        font-size: 14px;
      }
    }
  }
  .sort-type-active {
    color: blue;
  }
}
</style>
